<template>
  <div class="index">
    <div class="search">
      <div @click="toMapPage">{{ cityName }}</div>
      <div @click="toSearch">
        <input type="text" placeholder="搜索商品" disabled>
        <span class="icon"></span>
      </div>
    </div>
    <div class="swiper">
      <swiper class="swiper-container" indicator-dots="true" autoplay="true" interval="3000" circular="true"
              duration="500">
        <block v-for="(item, index) in banner " :key="index">
          <swiper-item class="swiper-item">
            <image :src="item.image_url" class="slide-image"/>
          </swiper-item>
        </block>
      </swiper>
    </div>
    <div class="channel">
      <div @click="categoryList(item.id)" v-for="(item, index) in channel" :key="index">
        <img :src="item.icon_url" alt="">
        <p>{{item.name}}</p>
      </div>
    </div>
    <div class="brand">
      <div @click="tobrandList" class="head">
        品牌制造商直供
      </div>
      <div class="content">
        <div @click="branddetail(item.id)" v-for="(item, index) in brandList" :key="index">
          <div>
            <p>{{item.name}}</p>
            <p>{{item.floor_price}}元起</p>
          </div>
          <img :src="item.new_pic_url" alt="">
        </div>
      </div>
    </div>
    <div class="newgoods">
      <div @click="goodsList('new')" class="newgoods-top">
        <div class="top">
          <p>新品首发</p>
          <p>查看全部</p>
        </div>
      </div>
      <div class="list">
        <ul>
          <scroll-view class="scroll-view" :scroll-x="true">
            <li @click="goodsDetail(item.id)" v-for="(item, index) in newGoods" :key="index">
              <img :src="item.list_pic_url" alt="">
              <p>{{item.name}}</p>
              <p>{{item.goods_brief}}</p>
              <p>￥{{item.retail_price}}</p>
            </li>
          </scroll-view>
        </ul>
      </div>
    </div>
    <div class="newgoods hotgoods">
      <div @click="goodsList('hot')" class="newgoods-top">
        <div class="top">
          <p>人气推荐<span></span> 好物精选</p>
          <p>查看全部</p>
        </div>
      </div>
      <div class="list">
        <ul>
          <scroll-view class="scroll-view" :scroll-x="true">
            <li @click="goodsDetail(item.id)" v-for="(item, index) in hotGoods" :key="index">
              <img :src="item.list_pic_url" alt="">
              <p>{{item.name}}</p>
              <p>{{item.goods_brief}}</p>
              <p>￥{{item.retail_price}}</p>
            </li>
          </scroll-view>
        </ul>
      </div>
    </div>
    <div class="topicList">
      <div @click="totopic" class="topicList-top">
        专题精选
        <span class="icon"></span>
      </div>
      <div class="list">
        <ul>
          <scroll-view class="scroll-view" :scroll-x="true">
            <li @click="topicdetail(item.id)" v-for="(item, index) in topicList" :key="index">
              <img :src="item.item_pic_url" alt="">
              <div class="btom">
                <div>
                  <p>{{item.title}}</p>
                  <p>{{item.subtitle}}</p>
                </div>
                <div>
                  {{item.price_info}}元起
                </div>
              </div>
            </li>
          </scroll-view>
        </ul>
      </div>
    </div>
    <div class="newcategory">
      <div class="list" v-for="(item, index) in newCategoryList" :key="index">
        <div class="head">{{item.name}}好物</div>
        <div class="sublist">
          <div @click="goodsDetail(subitem.id)" v-for="(subitem, subindex) in item.goodsList" :key="subindex">
            <img :src="subitem.list_pic_url" alt="">
            <p>{{subitem.name}}</p>
            <p>￥{{subitem.retail_price}}</p>
          </div>
          <div @click="categoryList(item.id)">
            <div class="last">
              <p>{{item.name}}好物</p>
              <span class="icon"></span>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
  import amapFile from "../../utils/amap-wx";
  import {get} from "../../utils";
  import {mapState, mapMutations} from "vuex";

  export default {
    data() {
      return {
        banner: [],
        channel: [],
        brandList: [],
        newGoods: [],
        hotGoods: [],
        topicList: [],
        newCategoryList: []
      }
    },
    components: {},
    computed: {
      ...mapState(["cityName"])
    },
    created() {
    },
    mounted() {
      this.getCityName();
      this.getData();
    },
    methods: {
      ...mapMutations(["update"]),
      toMapPage() {
        var _this = this;
        // 可以通过 wx.getSetting 先查询一下用户是否授权了 "scope.record" 这个 scope
        wx.getSetting({
          success(res) {
            //如果没有同意授权,打开设置
            if (!res.authSetting["scope.userLocation"]) {
              wx.openSetting({
                success: res => {
                  _this.getCityName();
                }
              });
            } else {
              wx.navigateTo({
                url: "/pages/mappage/main"
              });
            }
          }
        });
      },
      getCityName() {
        /**
         * AMapWX高德地图
         * */
        var _this = this;
        var myAmapFun = new amapFile.AMapWX({
          key: "a2665571c2d0ff0f145aaf1b393bf167"
        });
        myAmapFun.getRegeo({
          success: function (data) {
            //成功回调
            console.log(data);
            _this.update({cityName: data[0].regeocodeData.addressComponent.province});
          },
          fail: function (info) {
            //失败回调
            console.log(info);
            // 如果用户拒绝授权，默认为北京
            _this.cityName = "北京市";
            _this.update({cityName: "北京市"});
          }
        });
      },
      async getData() {
        const data = await get("/index/index");
        console.log(data);
        this.banner = data.banner;
        this.channel = data.channel;
        this.brandList = data.brandList;
        this.newGoods = data.newGoods;
        this.hotGoods = data.hotGoods;
        this.topicList = data.topicList;
        this.newCategoryList = data.newCategoryList;
      },
      toSearch() {
        // wx.navigateTo({
        //   url: "/pages/search/main"
        // });
      },
      categoryList(id) {
        console.log(id);
        wx.navigateTo({
          url: "/pages/categorylist/main?id=" + id
        });
      },
      tobrandList() {
        // wx.navigateTo({
        //   url: "/pages/brandlist/main"
        // });
      },
      branddetail(id) {
        console.log(id);
        // wx.navigateTo({
        //   url: "/pages/branddetail/main?id=" + id
        // });
      },
      goodsList(info) {
        // if (info == "hot") {
        //   wx.navigateTo({
        //     url: "/pages/newgoods/main?isHot=" + 1
        //   });
        // } else {
        //   wx.navigateTo({
        //     url: "/pages/newgoods/main?isNew=" + 1
        //   });
        // }
      },
      goodsDetail(id) {
        console.log(id);
        wx.navigateTo({
          url: "/pages/goods/main?id=" + id
        });
      },
      totopic() {
        /**
         * 注：调整Tab和Page有差异
         */
        wx.switchTab({
          url: "/pages/topic/main"
        });
      },
      topicdetail(id) {
        console.log(id);
        wx.navigateTo({
          url: "/pages/topicdetail/main?id=" + id
        });
      },
    },
    onPullDownRefresh() {
      this.getData();
      //刷新完成后关闭
      wx.stopPullDownRefresh();
    },

  }

</script>

<style lang='scss' scoped>
  @import "./style.scss";
</style>
